<template>
  <el-dialog title="选择用户" :visible.sync="visible" class="dialog-lg" top="5vh" append-to-body @close="close">
    <el-form :model="searchForm" ref="searchFormRef" size="small" inline>
      <el-form-item label="用户名称" prop="like.user_name">
        <el-input v-model="searchForm.like.user_name" placeholder="请输入用户名称" clearable class="w-150px"/>
      </el-form-item>
      <el-form-item label="手机号码" prop="like.phone">
        <el-input v-model="searchForm.like.phone" placeholder="请输入手机号码" clearable class="w-150px"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-table @row-click="clickRow" ref="tableRef" v-loading="loading" :data="listData" @selection-change="handleSelection">
        <el-table-column type="selection" align="center" width="55" />
        <el-table-column label="编号" align="center" prop="id" width="60"/>
        <el-table-column label="用户名称" prop="user_name" show-overflow-tooltip />
        <el-table-column label="用户昵称" prop="nick_name" show-overflow-tooltip />
        <el-table-column label="手机" prop="phone" show-overflow-tooltip />
        <el-table-column label="状态" align="center" prop="status">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="create_time" width="150">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.create_time) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize" @pagination="getList"/>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit" :loading="submitting" :disabled="loading || !ids.length">确 定</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { unAuthUsersListApi, authUserAppendApi } from "@/api/system/role";
export default {
  name: 'SelectUser',
  dicts: ['sys_normal_disable'],
  props: {
    value: Boolean,
    roleId: {
      type: [Number, String]
    }
  },
  data() {
    return {
      loading: false,
      submitting: false,
      ids: [],
      total: 0,
      listData: [],
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        roleId: undefined,
        like: { user_name: undefined, phone: undefined }
      }
    };
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.searchForm.roleId = this.roleId
      this.getList()
    },
    getList() {
      this.loading = true
      unAuthUsersListApi(this.searchForm).then(res => {
        this.listData = res.list
        this.total = res.total
        this.loading = false
      })
    },
    handleSubmit() {
      const roleId = this.searchForm.roleId
      const adminIds = this.ids.join(",")
      if (!adminIds) return this.$modal.msgError("请选择要分配的用户")
      if (this.submitting) return
      this.submitting = true
      authUserAppendApi(roleId, adminIds).then(res => {
        this.close(true, res.msg)
      }).finally(()=>{
        this.submitting = false
      })
    },
    clickRow(row) {
      this.$refs.tableRef.toggleRowSelection(row)
    },
    handleSelection(selection) {
      this.ids = selection.map(item => item.id)
    },
    search() {
      this.searchForm.pageNum = 1
      this.getList()
    },
    reset() {
      this.resetForm('searchFormRef')
      this.search()
    },
    close(submit = false, msg) {
      if (submit === true) this.$emit('submit')
      this.$emit('close', submit === true)
      if (msg) submit === true ? this.$modal.msgSuccess(msg) : this.$modal.msgError(msg)
      this.visible = false
    },
  }
};
</script>
